<template>
  <div id="contract">
    <div class="shadow-img slide-bck-bottom">
      <p class="nowrap"><span class="yellow">Contract</span></p>
    </div>
    <div class="description slide-bck-top">
      <div class="content">
        <p>Contact Info</p>
        <Row>
          <Col span="2"><Icon type="ios-pin" /></Col>
          <Col span="22">311B, Jalalabad, Sylhet</Col>
        </Row>
        <Row>
          <Col span="2"><Icon type="ios-call" /></Col>
          <Col span="22">+8801979791001</Col>
        </Row>
        <Row>
          <Col span="2"><Icon type="ios-mail" /></Col>
          <Col span="22">nurealamsabbir@authlab.io</Col>
        </Row>
        <form action="">
          <label for="">
            评价：<Rate show-text allow-half v-model="valueCustomText">
              <span style="color: #f5a623">{{ valueCustomText }}</span>
            </Rate>
          </label>
          <Input v-model="name" placeholder="Name"  class="inpt"/>
          <Input v-model="email" placeholder="Email"  class="inpt"/>
          <Input v-model="message" type="textarea" :rows="4" placeholder="Message" class="inpt"/>
          <Button type="warning" long class="sends">SEND</Button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
      tagspro: ["Show All", "Vue", "React", "jQuery"],
      valueCustomText: 3.8,
      name:"",
      email:"",
      message:"",
    };
  },
};
</script>

<style  scoped>
.shadow-img {
  width: 100%;
  margin: 0 auto;
  height: 8.125rem;
  background-color: #111111;
  border-radius: 0.3125rem;
  margin-top: 0.625rem;
  font-size: 1.5625rem;
  color: #ffffff;
  position: relative;
}
.shadow-img p {
  position: absolute;
  bottom: 1.25rem;
}
.shadow-img p span.yellow {
  color: #f4d03f;
  margin-right: 0.625rem;
  margin-left: 0.625rem;
}
.slide-bck-bottom {
  animation: slide-bck-bottom 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation-delay: 0.4s;
}
.slide-bck-top {
  animation: slide-bck-top 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation-delay: 0.4s;
}
.description {
  width: 100%;
  background-color: #ffffff;

  border-radius: 0.3125rem;
  margin: 0 auto;
  margin-top: 0.625rem;
  position: relative;
  margin-bottom: 1.25rem;
}

.description .content {
  padding: 0.9375rem 1.875rem;
}
.content > p {
  font-size: 1.3125rem;
  margin-bottom: 1.25rem;
}
.content form{
    width: 100%;
    background-color: #111111;
    color: #f4d03f;
    padding: .625rem;
    border-radius: .3125rem;
    margin-top: 1.25rem;
}
.content form .inpt{
    margin-bottom: .625rem;
}
.content form .sends{
    background-color: #f4d03f;
    color: #111;
    font-size: 1rem;
}
@keyframes slide-bck-bottom {
  0% {
    opacity: 0;
    transform: translateZ(400px) translateY(-200px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateY(0);
  }
}
@keyframes slide-bck-top {
  0% {
    opacity: 0;
    transform: translateZ(400px) translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateY(0);
  }
}
@keyframes slide-rotate-ver-left {
  0% {
    transform: translateX(-150px) rotateY(90deg);
  }
  100% {
    transform: translateX(0) rotateY(0);
  }
}
</style>